<template>
  <div class="alloc-resource">
    <el-card>
      <div class="top-line"
        v-for="(item, index) in roleResource"
        :key="item.id">
        <el-row class="border" style="background-color: #F2F6FC;">
          <el-checkbox
            @change="handleCheckAllChange($event, index)"
            :indeterminate="isIndeterminate[index]"
            v-model="checkAll[index]"
            :label="item.name"
          ></el-checkbox>
        </el-row>
        <el-row class="border">
          <el-checkbox-group
            v-model="checkedResource[index]"
            @change="handleCheckedResourceChange($event, index)">
            <el-col
              v-for="subitem in item.resourceList"
              :key="subitem.id"
              :span="8">
              <el-checkbox
                :label="subitem.name"
                :key="subitem.id"
                v-model="subitem.selected">
              </el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getResourceCategory, getRoleResources } from '@/services/resources'
export default {
  props: {
    roleId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      // 二级菜单
      resourceSubList: [],
      roleResource: [],
      // 选中的角色
      checkedResource: [],
      isIndeterminate: [],
      checkAll: []
    }
  },
  created () {
    this.loadResourceCategory()
    this.loadResourceByRoleId()
  },
  methods: {
    // 获取资源分类
    async loadResourceCategory () {
      const { data } = await getResourceCategory()
      if (data.code === '000000') {
        this.resourcesCategory = data.data
      }
      // console.log(data)
    },
    // 根据角色 ID 获取资源
    async loadResourceByRoleId () {
      const { data } = await getRoleResources(this.roleId)
      if (data.code === '000000') {
        this.roleResource = data.data
        // 取出子菜单
        this.getSubResource(this.roleResource)
        // 已选择的子菜单
        this.getcheckedResource(this.roleResource)
        // 判断初始状态
        this.checkedStatus(this.roleResource)
        console.log('resourcelist', this.resourceSubList)
        console.log('checkedResource', this.checkedResource)
        console.log('isIndeterminate', this.isIndeterminate)
        console.log('checkAll', this.checkAll)
      }
    },
    // 获取所有二级菜单
    getSubResource (resource) {
      this.resourceSubList = resource.map(items => {
        this.isIndeterminate.push(false)
        this.checkAll.push(false)
        if (items.resourceList) {
          return items.resourceList.map(item => {
            return item.name
          })
        }
      })
    },
    // 获取已被选择的菜单
    getcheckedResource (resource) {
      this.checkedResource = resource.map(items => {
        if (items.resourceList) {
          return items.resourceList.map(item => {
            if (item.selected) {
              return item.name
            }
          })
        }
      })
    },
    // 点击全选时
    handleCheckAllChange (checked, index) {
      console.log(checked)
      console.log(index)
      console.log(this.resourceSubList[index])
      this.checkedResource[index] = checked ? this.resourceSubList[index] : []
      this.isIndeterminate[index] = false
    },
    // 点击子选项时
    handleCheckedResourceChange (checked, index) {
      const checkedCount = checked.length
      const flag = checkedCount > 0 && checkedCount < this.resourceSubList.length
      this.checkAll[index] = checkedCount === this.resourceSubList[index]
      this.$set(this.isIndeterminate, index, flag)
    },
    // 判断初始的选择状态
    checkedStatus (roleList) {
      roleList.forEach((item, i) => {
        if (item.selected) {
          this.$set(this.checkAll, i, true)
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.el-row {
  padding: 20px;
}
.el-col {
  padding: 5px 0px;
}
.border {
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}
.top-line {
  border-top: 1px solid #dcdfe6;
}
</style>
